{% extends "admin/base_site_gridpivot.html" %}
{% load i18n %}

{% block tools %}{% if args.0 %}{% tabs "input.buffer" %}{% endif %}{{block.super}}{% endblock %}

{% block before_table %}{% if args.0 %}
<div id="graph" style="clear: both; height: 400px; padding: 10px; "></div>
{% endif %}{% endblock %}

{% block crosses %}
{% if args.0 %}$(function(){
  // Resize top graph
  var h = $(window).height();
  $("#graph").width($(window).width()-60).height(h>800 || h<480 ? 400 : h-420);
});{% endif %}

{% if args.0 or mode == "graph" %}
function drawGraphs(jsondata)
{
  {% if args.0 %}var margin = {top: 0, right: 100, bottom: 30, left: 70};
  {% else %}var margin = {top: 0, right: 0, bottom: 0, left: 70};
  {% endif %}var width = $({% if args.0 %}"#graph"{% else %}"#grid_graph"{% endif %}).width() - margin.left - margin.right;
  var height = {% if args.0 %}$("#graph").height(){% else %}80{% endif %} - margin.top - margin.bottom;

  // Lookup table of displayed columns
  var fields = {};
  for (var i in cross_idx)
    fields[cross_idx[i]] = 0;

  // Define X-axis
  var domain_x = [];
  var bucketnamelength = 0;
  for (var i in timebuckets)
  {
    domain_x.push(timebuckets[i]['name']);
    bucketnamelength = Math.max(timebuckets[i]['name'].length, bucketnamelength);
  }
  var x = d3.scale.ordinal()
    .domain(domain_x)
    .rangeRoundBands([0, width], .1);
  var x_width = x.rangeBand();
  {% if mode == "graph" and not args.0 %}graph.header(margin.left, x);{% endif %}
  
  // Define Y-axis
  var y = d3.scale.linear().rangeRound([height, 0]);

  // Draw all graphs
  $("#grid"){% if not args.0 %}.find(".graph"){% endif %}.each(function(index)
  {
    // Create a new SVG element
    $({% if args.0 %}$("#graph").get(0){% else %}this{% endif %}).html("");
    var svg = d3.select({% if args.0 %}$("#graph").get(0){% else %}this{% endif %})
      .append("svg")
      .attr("class","graphcell")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Build the data for d3
    var max_y = 0;
    var min_y = 0;
    var data = [];
    for (var bckt in timebuckets)
    {
      var tmp = jsondata['rows'][index][timebuckets[bckt]['name']];
      data.push({
        'buffer': jsondata['rows'][index]['buffer'],
        'bucket': bckt,
        'startinv': tmp[0],
        'startohdoc': tmp[1],
        'safetystock': tmp[2],    
        'consumed': tmp[3],
        'consumedMO': tmp[4],
        'consumedDO': tmp[5],
        'consumedSO': tmp[6],
        'produced': tmp[7],
        'producedMO': tmp[8],
        'producedDO': tmp[9],
        'producedPO': tmp[10],
        'endinv': tmp[11],
        'total_in_progress': tmp[12],
        'work_in_progress_mo': tmp[13],
        'on_order_po': tmp[14],
        'in_transit_do': tmp[15]
        });
      for (var i in cross_idx)
      {
        if (cross_idx[i] == 0 || cross_idx[i] == 2 || cross_idx[i] == 3 || cross_idx[i] == 7 || cross_idx[i] == 11) {
          if (tmp[cross_idx[i]] < min_y) min_y = tmp[cross_idx[i]];
          if (tmp[cross_idx[i]] > max_y) max_y = tmp[cross_idx[i]];
          }
      }
    }

    // Update the scale of the Y-axis by looking for the max value
    y.domain([min_y,max_y]);
    var y_zero = y(0);

    // Create D3 bars
    var my_y;
    svg.selectAll("g")
      .data(data)
      .enter()
      .append("g")
      .attr("transform", function(d) { return "translate(" + x(timebuckets[d['bucket']]['name']) + ",0)"; })
      .each(function(d) {
        var bucket = d3.select(this);
        if (d['produced'] > 0 && 1 in fields)
        {
          my_y = y(d['produced']);
          bucket.append("rect")
            .attr("width", x_width/2)
            .attr("height", y_zero - my_y)
            .attr("x", x_width/2)
            .attr("y", my_y)
            .style("fill","#2B95EC");
        }
        if (d['consumed'] > 0 && 2 in fields)
        {
          my_y = y(d['consumed']);
          bucket.append("rect")
            .attr("width", x_width/2)
            .attr("height", y_zero - my_y)
            .attr("y", my_y)
            .style("fill","#F6BD0F");
        }
        // Invisible rectangle for the tooltip
      	bucket.append("rect")
	      .attr("height", height)
	      .attr("width", x_width)
	      .attr("fill-opacity", 0)
	      .on("click", function(d) {
	          if (d3.event.defaultPrevented || (d['produced'] == 0 && d['consumed'] == 0))
	            return;
	          d3.select("#tooltip").style('display', 'none');
	
	          window.location = url_prefix
	            + "/flowplan/"
	            + admin_escape(d['buffer'])
	            + "/?noautofilter&flowdate__gte=" + timebuckets[d['bucket']]['startdate']
	            + "&flowdate__lt=" + timebuckets[d['bucket']]['enddate'];
	
	          d3.event.stopPropagation();
	        })
	      .on("mouseenter", function(d) {
	        tiptext = '<div class="panel-heading" style="text-align:center; font-weight:bold">'
	          + timebuckets[d['bucket']]['name'] + '</div>'
	          + '<table><tr><td>{{_('start inventory days of cover')|capfirst}}</td><td style="text-align:right">'
	          + d['startohdoc'] + " {{_('days')}}"
	          + '</td></tr><tr><td>{{_('start inventory')|capfirst}}</td><td style="text-align:right">'
	          + grid.formatNumber(d['startinv']);
	        if (d['producedPO'])
	          tiptext += '</td></tr><tr><td>{{_('produced by PO')|capfirst}}</td><td style="text-align:right">+ '
	            + grid.formatNumber(d['producedPO']);
	        if (d['producedMO'])
	          tiptext += '</td></tr><tr><td>{{_('produced by MO')|capfirst}}</td><td style="text-align:right">+ '
	            + grid.formatNumber(d['producedMO']);
	        if (d['producedDO'])
	          tiptext += '</td></tr><tr><td>{{_('produced by DO')|capfirst}}</td><td style="text-align:right">+ '
	            + grid.formatNumber(d['producedDO']);
	        if (d['consumedMO'])
	          tiptext += '</td></tr><tr><td>{{_('consumed by MO')|capfirst}}</td><td style="text-align:right">- '
	            + grid.formatNumber(d['consumedMO']);
	        if (d['consumedSO'])
	          tiptext += '</td></tr><tr><td>{{_('consumed by SO')|capfirst}}</td><td style="text-align:right">- '
	            + grid.formatNumber(d['consumedSO']);
	        if (d['consumedDO'])
	          tiptext += '</td></tr><tr><td>{{_('consumed by DO')|capfirst}}</td><td style="text-align:right">- '
	            + grid.formatNumber(d['consumedDO']);
	        tiptext += '</td></tr><tr><td>{{_('end inventory')|capfirst}}</td><td style="text-align:right">= '
	          + grid.formatNumber(d['startinv']+d['produced']-d['consumed']);
	        if (d['safetystock'])
	          tiptext += '</td></tr><tr><td>{{_('safety stock')|capfirst}}</td><td style="text-align:right">'
	            + grid.formatNumber(d['safetystock']);
	        if (d['total_in_progress'])
	          tiptext += '</td></tr><tr><td>{{_('total in progress')|capfirst}}</td><td style="text-align:right">'
	            + grid.formatNumber(d['total_in_progress']);
	        if (d['work_in_progress_mo'])
	          tiptext += '</td></tr><tr><td>{{_('work in progress MO')|capfirst}}</td><td style="text-align:right">'
	            + grid.formatNumber(d['work_in_progress_mo']);
	        if (d['on_order_po'])
	          tiptext += '</td></tr><tr><td>{{_('on order PO')|capfirst}}</td><td style="text-align:right">'
	            + grid.formatNumber(d['on_order_po']);
	        if (d['in_transit_do'])
	          tiptext += '</td></tr><tr><td>{{_('in transit DO')|capfirst}}</td><td style="text-align:right">'
	            + grid.formatNumber(d['in_transit_do']);
	        tiptext += '</td></tr></table>'          
	        graph.showTooltip(tiptext);
	        })
	      .on("mouseleave", graph.hideTooltip)
	      .on("mousemove", graph.moveTooltip);        
      });

    // Create D3 line
    if (0 in fields)
    {
      var line = d3.svg.line()
        .x(function(d) { return x(timebuckets[d['bucket']]['name']) + x_width / 2; })
        .y(function(d) { return y(d['startinv']); });
      svg.append("svg:path")
        .attr('class', 'graphline')
        .attr("stroke","#8BBA00")
        .attr("d", line(data));
    }
    else if (3 in fields)
    {
      var line = d3.svg.line()
        .x(function(d) { return x(timebuckets[d['bucket']]['name']) + x_width / 2; })
        .y(function(d) { return y(d['endinv']); });
      svg.append("svg:path")
        .attr('class', 'graphline')
        .attr("stroke","#7B5E08")
        .attr("d", line(data));
    }
    if (2 in fields)
    {
      var line = d3.svg.line()
        .x(function(d) { return x(timebuckets[d['bucket']]['name']) + x_width / 2; })
        .y(function(d) { return y(d['safetystock']); });
      svg.append("svg:path")
        .attr('class', 'graphline')
        .attr("stroke","#FF0000")
        .attr("d", line(data));
    }

    // Display Y-Axis
    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");
    {% if not args.0 %}
    svg.append("g")
      .attr("class", "miniaxis")
      .call(graph.miniAxis.bind(yAxis));
    {% else %}
    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

    // Display 0 line
    if (min_y < 0 && max_y > 0)
      svg.append("line")
        .attr("x1", 0)
        .attr("x2", width)
        .attr("y1", y(0))
        .attr("y2", y(0))
        .attr("stroke-width", 1)
        .attr("stroke", "black")
        .attr("shape-rendering", "crispEdges");

    // Display X-axis for a single buffer
    var nth = Math.ceil(timebuckets.length / width * bucketnamelength * 10);
    var myticks = [];
    for (var i in timebuckets)
      if (i % nth == 0) myticks.push(timebuckets[i]['name']);
    var xAxis = d3.svg.axis()
      .scale(x)
      .tickValues(myticks)
      .orient("bottom");
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    // Display legend
    var legend = svg.append("g");
    var codes = [
      ["{{_('start inventory')|capfirst}}", "#8BBA00"],
      [],
      ["{{_('safety stock')|capfirst}}", "#FF0000"],
      ["{{_('consumed')|capfirst}}", "#F6BD0F"],
      [],
      [],
      [],
      ["{{_('produced')|capfirst}}", "#2B95EC"],
      [],
      [],
      [],
      ["{{_('end inventory')|capfirst}}", "#7B5E08"]
      ];
    var cnt = 0;
    for (var i in cross_idx)
    {
      if (cross_idx[i] == 0 || cross_idx[i] == 2|| cross_idx[i] == 3 || cross_idx[i] == 7 || cross_idx[i] == 11) {
        legend.append("rect")
          .attr("x", width + 82)
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", codes[cross_idx[i]][1])
          .attr("transform", "translate(0," + (cnt*20+10) + ")");
        legend.append("text")
          .attr("x", width + 76)
          .attr("y", 9)
          .attr("dy", ".35em")
          .style("text-anchor", "end")
          .text(codes[cross_idx[i]][0])
          .attr("transform", "translate(0," + (cnt*20+10) + ")");
        ++cnt;
        }
    }{% endif %}
    });
}
{% endif %}
{% if args.0 or mode == "table" %}
function crosses (cellvalue, options, rowdata)
{
  var result = '';
  for (var i in cross_idx)
    switch(cross_idx[i])
    {
      case 1:
        result += cellvalue[cross_idx[i]] + '<br>';
        break;
      case 3:
        if (cellvalue[3] != 0.0)
           result += grid.formatNumber(cellvalue[3]) + "<a href='{{request.prefix}}/flowplan/" +
              admin_escape(rowdata['buffer']) +
              "/?flowdate__gte=" + options['colModel']['startdate'] +
              "&amp;flowdate__lt=" + options['colModel']['enddate'] +
              "&amp;quantity__lt=0&amp;noautofilter'>&nbsp;<span class='context cross fa fa-caret-right'></span></a><br>";
        else
          result += '0<br>';
        break;
      case 4:
        if (cellvalue[4] != 0.0)
           result += grid.formatNumber(cellvalue[4]) + "<a href='{{request.prefix}}/data/input/manufacturingorder/consumed/" +
              admin_escape(rowdata['item']) + "/" +
              admin_escape(rowdata['location']) + "/" +
              options['colModel']['startdate'] + "/" +
              options['colModel']['enddate'] + "/" +
              "?noautofilter'>&nbsp;<span class='context cross fa fa-caret-right'></span></a><br>";
        else
          result += '0<br>';
        break;
      case 5:
        if (cellvalue[5] != 0.0)
           result += grid.formatNumber(cellvalue[5]) + "<a href='{{request.prefix}}/data/input/distributionorder/consumed/" +
              admin_escape(rowdata['item']) + "/" +
              admin_escape(rowdata['location']) + "/" +
              options['colModel']['startdate'] + "/" +
              options['colModel']['enddate'] + "/" +
              "?noautofilter'>&nbsp;<span class='context cross fa fa-caret-right'></span></a><br>";
        else
          result += '0<br>';
        break;
      case 6:
        if (cellvalue[6] != 0.0)
           result += grid.formatNumber(cellvalue[6]) + "<a href='{{request.prefix}}/data/input/deliveryorder/consumed/" +
              admin_escape(rowdata['item']) + "/" +
              admin_escape(rowdata['location']) + "/" +
              options['colModel']['startdate'] + "/" +
              options['colModel']['enddate'] + "/" +
              "?noautofilter'>&nbsp;<span class='context cross fa fa-caret-right'></span></a><br>";
        else
          result += '0<br>';
        break;
      case 7:
        if (cellvalue[7] != 0.0)
           result += grid.formatNumber(cellvalue[7]) + "<a href='{{request.prefix}}/flowplan/" +
              admin_escape(rowdata['buffer']) +
              "/?flowdate__gte=" + options['colModel']['startdate'] +
              "&amp;flowdate__lt=" + options['colModel']['enddate'] +
              "&amp;quantity__gte=0&amp;noautofilter'>&nbsp;<span class='context cross fa fa-caret-right'></span></a><br>";
        else
          result += '0<br>';
        break;
      case 8:
        if (cellvalue[8] != 0.0)
           result += grid.formatNumber(cellvalue[8]) + "<a href='{{request.prefix}}/data/input/manufacturingorder/produced/" +
              admin_escape(rowdata['item']) + "/" +
              admin_escape(rowdata['location']) + "/" +
              options['colModel']['startdate'] + "/" +
              options['colModel']['enddate'] + "/" +
              "?noautofilter'>&nbsp;<span class='context cross fa fa-caret-right'></span></a><br>";
        else
          result += '0<br>';
        break;
      case 9:
        if (cellvalue[9] != 0.0)
           result += grid.formatNumber(cellvalue[9]) + "<a href='{{request.prefix}}/data/input/distributionorder/produced/" +
              admin_escape(rowdata['item']) + "/" +
              admin_escape(rowdata['location']) + "/" +
              options['colModel']['startdate'] + "/" +
              options['colModel']['enddate'] + "/" +
              "?noautofilter'>&nbsp;<span class='context cross fa fa-caret-right'></span></a><br>";
        else
          result += '0<br>';
        break;
      case 10:
        if (cellvalue[10] != 0.0)
           result += grid.formatNumber(cellvalue[10]) + "<a href='{{request.prefix}}/data/input/purchaseorder/produced/" +
              admin_escape(rowdata['item']) + "/" +
              admin_escape(rowdata['location']) + "/" +
              options['colModel']['startdate'] + "/" +
              options['colModel']['enddate'] + "/" +
              "?noautofilter'>&nbsp;<span class='context cross fa fa-caret-right'></span></a><br>";
        else
          result += '0<br>';
        break;
      case 13:
        if (cellvalue[13] != 0.0)
           result += grid.formatNumber(cellvalue[13]) + "<a href='{{request.prefix}}/data/input/manufacturingorder/operationplanmaterial/" +
              admin_escape(rowdata['item']) + "/" + admin_escape(rowdata['location']) +
              "/" + options['colModel']['enddate'] +
              "/?noautofilter'>&nbsp;<span class='context cross fa fa-caret-right'></span></a><br>";
        else
          result += '0<br>';
        break;
      case 14:
        if (cellvalue[14] != 0.0)
           result += grid.formatNumber(cellvalue[14]) + "<a href='{{request.prefix}}/data/input/purchaseorder/operationplanmaterial/" +
              admin_escape(rowdata['item']) + "/" + admin_escape(rowdata['location']) +
              "/" + options['colModel']['enddate'] +
              "/?noautofilter'>&nbsp;<span class='context cross fa fa-caret-right'></span></a><br>";
        else
          result += '0<br>';
        break;
      case 15:
        if (cellvalue[15] != 0.0)
           result += grid.formatNumber(cellvalue[15]) + "<a href='{{request.prefix}}/data/input/distributionorder/operationplanmaterial/" +
              admin_escape(rowdata['item']) + "/" + admin_escape(rowdata['location']) +
              "/" + options['colModel']['enddate'] +
              "/?noautofilter'>&nbsp;<span class='context cross fa fa-caret-right'></span></a><br>";
        else
          result += '0<br>';
        break;
      default:
        result += grid.formatNumber(cellvalue[cross_idx[i]]) + '<br>';
    }
  return result;
};
{% endif %}{% endblock %}

{% block extra_grid %}{% if args.0 or mode == "graph" %}loadComplete: drawGraphs,
{% endif %}{% endblock %}

